<template>
  <div id="headImg">
    <div id="myPhoto">
      <div class="viewPhoto" @click="monidianji">
        <i class="el-icon-plus"></i>
        <img
          :src="imageSave"
          alt=""
          id="portrait"
          style="width: 350px; height: 200px"
        />
      </div>
      <p>
        提示：请选择本地图片上传，支持各种图片格式<br />
        上方选择图片
      </p>
      <div class="myText">
        <el-form
          :model="numberValidateForm"
          ref="numberValidateForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="年龄"
            prop="age"
            :rules="[
              { required: true, message: '年龄不能为空' },
              { type: 'number', message: '年龄必须为数字值' },
            ]"
          >
            <el-input
              type="age"
              v-model.number="numberValidateForm.age"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="性别"
            prop="sex"
            :rules="[{ required: true, message: '性别不能为空' }]"
          >
            <el-input
              type="sex"
              v-model.number="numberValidateForm.sex"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="犬种"
            prop="type"
            :rules="[{ required: true, message: '犬种不能为空' }]"
          >
            <el-input
              type="type"
              v-model.number="numberValidateForm.type"
              autocomplete="off"
            ></el-input>
          </el-form-item>


          <el-form-item
            label="体重"
            prop="weight"
            :rules="[{ required: true, message: '体重不能为空' }]"
          >
            <el-input
              type="weight"
              v-model.number="numberValidateForm.weight"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="肩高"
            prop="heigh"
            :rules="[{ required: true, message: '肩高不能为空' }]"
          >
            <el-input
              type="heigh"
              v-model.number="numberValidateForm.heigh"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="体长"
            prop="long"
            :rules="[{ required: true, message: '体长不能为空' }]"
          >
            <el-input
              type="long"
              v-model.number="numberValidateForm.long"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="listBox">
        <input type="file" id="saveImage" name="myphoto" />
      </div>

      <div class="save">
        <el-button type="danger" size="small" @click="imageSubmit"
          >提交</el-button
        >
        <div style="margin-bottom: 70px; padding-top: 30px">
          <span>{{ uploadDate }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      numberValidateForm: {
        age: "",
        sex: "",
        type: "",
        heigh: "",
        long: "",
        weight: "",
        
      },
      imageSave: "", //图片路径
      uploadDate: "上传时间：", //上传时间
      
    };
  },

  methods: {
    monidianji() {
      document.getElementById("saveImage").click();
    },
    yulan() {
      document.getElementById("saveImage").onchange = function () {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function () {
          document.getElementById("portrait").src = fr.result;
        };
        fr.readAsDataURL(imgFile);
      };
    },
    imageSubmit() {
      let _this = this;
      let x = document.getElementById("saveImage").files[0];
      let params = new FormData(); //创建一个form对象
      params.append("file", x); //append 向form表单添加数据
      params.append("age", this.numberValidateForm.age);
      params.append("sex", this.numberValidateForm.sex);
      params.append("type", this.numberValidateForm.type);
      params.append("heigh", this.numberValidateForm.heigh);
      params.append("long", this.numberValidateForm.long);
      params.append("weight", this.numberValidateForm.weight);
      //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
      let config = { headers: { "Content-Type": "multipart/form-data" } };
      //发起ajax请求存放在服务端
      this.$axios
        .post(
          "http://localhost:9091/punish-complaint-notice/uploadAdopt",
          params,
          config
        )
        .then(function (res) {
          let mydate = new Date();
          _this.uploadDate = "上传时间：" + mydate.toLocaleString();
          _this.$notify({
            type: "success",
            message: "上传成功!",
            offset: 160,
          });
        })
        .catch(function (error) {
          console.log(error);
          _this.$notify({
            type: "warning",
            message: "上传失败!",
            offset: 160,
          });
        });
    },
  },
  mounted() {
    this.yulan(); //预览图片
  },
  computed: {},
};
</script>
<style scoped>
#headImg {
  margin-left: 50px;
}
.viewPhoto {
  border: 1px rgba(99, 199, 210, 0.79) dashed;
  width: 350px;
  height: 200px;
}
.myText {
  width: 350px;
}
#saveImage {
  display: none;
}
.save {
  margin: 30px auto;
}
.viewPhoto {
  position: relative;
}
.el-icon-plus {
  font-size: 50px;
  color: rgba(99, 199, 210, 0.79);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  text-align: center;
}
</style>
